import React, { useEffect, useRef } from 'react'
import * as echarts from 'echarts'
import '../../vendor/china'
import { getDisease } from '../../api/statistics'

export default function Map() {
  const mapRef = useRef()

  useEffect(async() => {
    const result = await getDisease()
    console.log(result)
    const myCharts = echarts.init(mapRef.current)
    myCharts.setOption({
      title: {
        text: '疫情实时数据',
      },
      tooltip: {
        trigger: 'item',
        formatter: '地　　区：{b}<br/>现有确诊：{c}',
      },
      visualMap: {
        type: 'piecewise',
        pieces: [
          {gte: 10000, color: '#F00'},
          {gte: 1000, lt: 10000, color: '#F00', colorAlpha: 0.8},
          {gte: 100, lt: 1000, color: '#F00', colorAlpha: 0.6},
          {gte: 10, lt: 100, color: '#F00', colorAlpha: 0.4},
          {gte: 1, lt: 10, color: '#F00', colorAlpha: 0.2},
          {value: 0, color: '#FFF'},
        ],
      },
      series: [
        {
          name: '',
          type: 'map',
          mapType: 'china', // 自定义扩展图表类型
          label: {
            show: true,
          },
          data: result.areaTree[0].children.map(child => ({
            name: child.name,
            value: child.total.nowConfirm,
          })),
        },
      ],
    })
  }, [])

  return (
    <div style={{width: 800, height: 600}} ref={mapRef}></div>
  )
}
